# Vue 实战：组件 UI 编写

我们本节开始正式编写组件，我们尽量在组件的编写过程中串联上我们的知识点，因此，有些时候我们的用法并不是最优解，而是为了要把一些重要的 API 用法带到实战项目中去。

注意，我们的源代码已经在 github 上，强烈建议结合源代码阅读。

我已经把对应的部分打上标签：

• Header 组件编写对应 Tag v1.0
• Create 页面编写对应 Tag v1.1
• 剩余逻辑编写对应 Tag v1.2

这个应用的整体逻辑效果演示如下：

# Header 组件编写

我们在 src/components/ 目录下新建 Header.vue 单文件，在这里我们编写一个 Header 组件。

非常建议你进入 github 的代码仓库结合本节学习

我们的 Header 组件其实是一个头部组件，会显示当前页面的标题和导航、操作按钮，效果如下：

这里我们想展示两个知识点：

• 计算属性的使用
• 方法的使用

我们计划只用两个路由，一个 home 路由存放我们的各种 todo 列表，另一个 create 路由用于新建 todo 项目。

而这两个页面 Header 组件的 Icon 按钮不仅样式不同，位置不同，事件也不同，而页面标题也不一样，所以我们需要根据不同的路由来生成不同的 Header。

所以应该如何计算出不同的情况，这个时候用计算属性比较适合。

TypeScript 中的计算属性是用类的存取器来实现的，比如我们的方法为 pageInfoComputed，需要在其前面加上 get。

@Component({
  components: {
    [Icon.name]: Icon
  }
})
export default class Header extends Vue {

  private get pageInfoComputed() {
    const currentRouteName = this.$route.name;
    switch (currentRouteName) {
      case "home":
        return {
          icon: {
            name: "plus",
            arrow: "right"
          },
          title: "我的待办"
        };
      case "create":
        return {
          icon: {
            name: "arrow-left",
            arrow: "left"
          },
          title: "新建任务"
        };

      default:
        return "";
    }
  }
}

如何我们想要声明两个方法，分别对应两个不同的 Icon 对应的行为，一个是跳转到 create 路由，一个是路由后退。

在 TypeScript 我们直接使用类方法即可，你也可以加上访问修饰符：

...
  private leftHandle() {
    this.$router.back();
  }

  private rightHandle() {
    this.$router.push({ path: "/create" });
  }

...

随后我们在模板中使用：

  <